<template>
  <div class="app-container home-container">
    <div class="page-header">
      <el-button
        type="primary"
        icon="el-icon-refresh"
        size="mini"
        @click="handleRefresh"
        :loading="loading"
      >刷新</el-button>
    </div>

    <div class="notice-list" v-loading="loading">
      <div class="empty-state" v-if="myNoticeList.length === 0 && !loading">
        <el-empty description="暂无通知消息"/>
      </div>

      <el-card
        shadow="hover"
        class="notice-card"
        v-for="(notice, index) in myNoticeList"
        :key="notice.noticeId || index"
      >
        <div class="notice-header">
          <h3 class="notice-title">{{ notice.noticeTitle || '无标题' }}</h3>
          <span class="send-time">{{notice.createTime || '无时间' }}</span>
        </div>
        <div class="notice-content">
          <p>{{ notice.noticeContent || '无通知内容' }}</p>
        </div>
        <div class="notice-footer">
          <div>
            <span class="sender">发送人：{{ notice.publishName || '系统' }}</span>
          </div>
          <span class="notice-type">
            <dict-tag :options="dict.type.sys_notice_type" :value="notice.noticeType"/>
          </span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {myNotice} from "@/api/equ/notice";

export default {
  name: "index",
  dicts: ['sys_notice_type'],
  data() {
    return {
      loading: false,
      myNoticeList: [],
      refreshTimer: null
    };
  },
  created() {
    this.getMyNotice();
  },
  methods: {
    /** 查询我的通知列表 */
    getMyNotice() {
      this.loading = true;
      myNotice().then((response) => {
        this.myNoticeList = response.rows || [];
        this.loading = false;
      });
    },
    /** 刷新 */
    handleRefresh() {
      // 清除之前的延时器，避免出现重复弹窗
      if (this.refreshTimer) clearTimeout(this.refreshTimer);
      this.getMyNotice();
      // 延时 600ms 显示提醒
      this.refreshTimer = setTimeout(() => {
        this.$message.success("刷新成功");
      }, 600);

    }
  }
};
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notice-card {
  transition: all 0.3s ease;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 8px;
}

.notice-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.send-time {
  font-size: 12px;
  color: #999;
}

.notice-content {
  margin-bottom: 12px;
  color: #666;
  line-height: 1.6;
  white-space: pre-line;
}

.notice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #888;
}


.notice-type {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #e8f4f8;
  color: #4299e1;
}

.empty-state {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
